<!-- 客户端组 -->
<template>
  <div class="out-box" v-userAuth="'D22-1'">
    <div class="line-operate-box" v-userAuth="'D22-2'">
      <a-button type="primary" @click="addUserGroup">
        <!-- <i class="icon icon-new16f operate-icon"></i> -->
        <Iconfont class="icon operate-icon" type="icon-new16f"></Iconfont>
        {{$t('Add-new')}}
      </a-button>
    </div>
    <!-- 表格 -->
    <a-table
      class='tabstyle'
      :columns="userGroupColumns"
      :loading="tableLoading"
			:dataSource="tableData"
      size="small"
      :pagination="pagination"
      :rowKey="(record) => record.target" 
      :locale="defaultSetting"
      bordered
    >
      <!-- 客户端 -->
      <template slot="client" slot-scope="text, record">
        <span :title="text&&text.length!==0 ? text.join(',') : '-'">{{text&&text.length!==0 ? text.join(',') : '-'}}</span>
      </template>
      <!-- luns -->
      <template slot="luns" slot-scope="text, record">
        <span :title="text&&text.length!==0 ? text.join(',') : '-'">{{text&&text.length!==0 ? text.join(',') : '-'}}</span>
      </template>
			<template slot="operation" slot-scope="text, record">
				<a-tooltip placement='top' v-userAuth="'D22-3'">
          <template slot='title'>
            <span>{{$t('Edit')}}</span>
          </template>
          <!-- <i
            class="icon icon-edit16f table-operation-icon"
            @click="editUserGroup(record)"
          ></i> -->
          <Iconfont class="icon table-operation-icon" type="icon-edit16f" @click="editUserGroup(record)"></Iconfont>
        </a-tooltip>
        <a-tooltip placement='top' v-userAuth="'D22-4'">
          <template slot='title'>
            <span>{{$t('Delete')}}</span>
          </template>
          <!-- <i
            class="icon icon-delete16f table-operation-icon"
            @click="delUserGroup(record)"
          ></i> -->
          <Iconfont class="icon table-operation-icon" type="icon-delete16f" @click="delUserGroup(record)"></Iconfont>
        </a-tooltip>
			</template>
    </a-table>

    <!-- 新增用户组 -->
    <AddClientGroup 
      :visible="addUserGroupVisible"
      :targetsData="targetsData"
      :lunsData="lunsData"
      :isLoadingForm="isLoadingForm"
      @updateUserGroup="updateData"
      @closeUserGroupDrawer="closeUserGroupDrawer"
    />

    <!-- 编辑用户组 -->
    <EditClientGroup 
      :visible="editUserGroupVisible"
      :targetUserGroup="targetUserGroup"
      :targetsData="targetsData"
      :isLoadingForm="isLoadingForm"
      :lunsData="lunsData"
      @updateUserGroup="updateData"
      @closeUserGroupDrawer="closeUserGroupDrawer"
    />

    <!-- 删除用户组 -->
    <DelClientGroup 
      :visible="delUserGroupVisible"
      :targetUserGroup="targetUserGroup"
      @updateUserGroup="updateData"
      @closeUserGroupDrawer="closeUserGroupDrawer"
    />

  </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import AddClientGroup from '@/views/storage_mgr/osd/iscsi/userGroupOperate/AddClientGroup'
import EditClientGroup from '@/views/storage_mgr/osd/iscsi/userGroupOperate/EditClientGroup'
import DelClientGroup from '@/views/storage_mgr/osd/iscsi/userGroupOperate/DelClientGroup'
import { sortName } from '@/assets/js/tableSortMethods'

export default {
  name: "ClientGroup",
  components: { AddClientGroup, EditClientGroup, DelClientGroup },
  data() {
    return {
			defaultSetting: {emptyText:<EmptyData />},
      tableLoading: false,
      userGroupColumns: [
        {
          title: this.$t('Group-name'),
			  	dataIndex: 'group',
			  	key: 'group',
          width: 150,
			  	ellipsis: true,
          sorter: (a, b) => this.sortName(a.group, b.group),
        },
        {
          title: this.$t('Access-path'),
			  	dataIndex: 'target',
			  	key: 'target',
			  	ellipsis: true,
          sorter: (a, b) => this.sortName(a.target, b.target),
        },
        {
          title: this.$t('Client-num'),
			  	dataIndex: 'client_count',
			  	key: 'client_count',
          width: 140,
          ellipsis: true,
          sorter: (a, b) => a.client_count - b.client_count,
        },
        {
          title: this.$t('Client'),
			  	dataIndex: 'client',
			  	key: 'client',
          ellipsis: true,
          scopedSlots:{customRender:'client'},
          sorter: (a, b) => this.sortName(a.client, b.client),
        },
        {
          title: this.$t('LUN-volume'),
			  	dataIndex: 'luns',
			  	key: 'luns',
          ellipsis: true,
          scopedSlots:{customRender:'luns'},
          sorter: (a, b) => this.sortName(a.luns, b.luns),
        },
        {
			  	title:this.$t('Operate'),
			  	dataIndex: 'operate',
			  	key: 'operate',
			  	width: 150,
			  	scopedSlots:{customRender:'operation'},
			  }
      ],
      tableData: [],
      pagination: {
	      defaultPageSize: 5,
	      showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
	      showSizeChanger: true,
	      pageSizeOptions: ['5', '10', '15', '20'],
				// onChange: (page, pageSize) =>  {this.selectedRowKeys = []; },
	      onShowSizeChange:(current, pageSize) => this.pageSize = pageSize,
				buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
	    },
      addUserGroupVisible: false,
      editUserGroupVisible: false,
      delUserGroupVisible: false,
      targetUserGroup: {},
      targetsData: [],
      lunsData: [],
      isLoadingForm: false,
    }
  },
  beforeMount() {
    
  },

  mounted() {
    // const tags = localStorage.getItem('tags');
    // if(tags.indexOf('D22') !== -1) {
      this.getTableData();
      this.getTarget();
    // }
  },

  watch: {
    "$store.state.language"() {
      this.userGroupColumns = [
        {
          title: this.$t('Group-name'),
			  	dataIndex: 'group',
			  	key: 'group',
          width: 150,
			  	ellipsis: true,
          sorter: (a, b) => this.sortName(a.group, b.group),
        },
        {
          title: this.$t('Access-path'),
			  	dataIndex: 'target',
			  	key: 'target',
			  	ellipsis: true,
          sorter: (a, b) => this.sortName(a.target, b.target),
        },
        {
          title: this.$t('Client-num'),
			  	dataIndex: 'client_count',
			  	key: 'client_count',
          width: 140,
          ellipsis: true,
          sorter: (a, b) => a.client_count - b.client_count,
        },
        {
          title: this.$t('Client'),
			  	dataIndex: 'client',
			  	key: 'client',
          ellipsis: true,
          scopedSlots:{customRender:'client'},
          sorter: (a, b) => this.sortName(a.client, b.client),
        },
        {
          title: this.$t('LUN-volume'),
			  	dataIndex: 'luns',
			  	key: 'luns',
          ellipsis: true,
          scopedSlots:{customRender:'luns'},
          sorter: (a, b) => this.sortName(a.luns, b.luns),
        },
        {
			  	title:this.$t('Operate'),
			  	dataIndex: 'operate',
			  	key: 'operate',
			  	width: 150,
			  	scopedSlots:{customRender:'operation'}
			  }
      ]
    },
  },

  methods: {
    // 获取表格数据
    async getTableData() {
      this.tableLoading = true;
      const res = await this.$api.iscsi.getUserGroupListRequest();
      // console.log('用户组列表', res)
      if(res && res.data) {
        this.tableData = res.data;
      }
      this.tableLoading = false;
    },

    // 获取target和lun
    async getTarget() {
      this.isLoadingForm = true;
      const res = await this.$api.iscsi.getTargetRequest();
      // console.log('target', res);
      if(res && res.data) {
        this.targetsData = res.data.target;
        this.lunsData = res.data.blocks;
      }
      this.isLoadingForm = false;
    },

    //新增用户组
    addUserGroup() {
      this.addUserGroupVisible = true;
    },

    //编辑用户组
    editUserGroup(record) {
      this.targetUserGroup = record;
      this.editUserGroupVisible = true;
    },

    //删除用户组
    delUserGroup(record) {
      this.targetUserGroup = record;
      this.delUserGroupVisible = true;
    },

    //关闭操作弹窗
    closeUserGroupDrawer(type) {
      if(type == 'add') {
        this.addUserGroupVisible = false;
      }else if(type == 'edit') {
        this.editUserGroupVisible = false;
      }else if(type == 'del') {
        this.delUserGroupVisible = false;
      }
    },

    // 对名称进行排序
    sortName(a, b) {
      return sortName(a, b)
    },

    // 操作成功后，更新数据
    updateData() {
      this.getTableData();
      this.getTarget();
    },
  },
}
</script>
<style scoped>
  .out-box {
    padding: 15px;
  }
  .line-operate-box {
    margin-bottom: 10px;
  }
  .operate-icon {
    margin-right: 5px;
  }
</style>